<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div class="report-con">
    <button style="margin-top: 20px" onclick="getNewReport()">强制更新</button>
    <div class="title">申请行为详情</div>
    <div class="table">
        <table>
            <tr>
                <th>申请准⼊分</th>
                <th>申请准⼊置信度</th>
                <th>申请命中机构数</th>
                <th>申请命中消⾦类机构数</th>
            </tr>
            <tr>
                <td id="A22160001"></td>
                <td id="A22160002"></td>
                <td id="A22160003"></td>
                <td id="A22160004"></td>
            </tr>
            <tr>
                <th>申请命中⽹络贷款类机构数</th>
                <th>机构总查询次数</th>
                <th>最近⼀次查询时间</th>
                <th>近1个⽉机构总查询笔数</th>
            </tr>
            <tr>
                <td id="A22160005"></td>
                <td id="A22160006"></td>
                <td id="A22160007"></td>
                <td id="A22160008"></td>
            </tr>
            <tr>
                <th>近3个⽉机构总查询笔数</th>
                <th>近6个⽉机构总查询笔数</th>
            </tr>
            <tr>
                <td id="A22160009"></td>
                <td id="A22160010"></td>
            </tr>
        </table>
    </div>

    <div class="title">放款还款详情</div>
    <div class="table">
        <table>
            <tr>
                <th>贷款⾏为分</th>
                <th>正常还款订单数占贷款总订单数⽐例</th>
                <th>最近⼀次履约距今天数</th>
                <th>贷款⾏为置信度</th>
            </tr>
            <tr>
                <td id="B22170001"></td>
                <td id="B22170034"></td>
                <td id="B22170050"></td>
                <td id="B22170051"></td>
            </tr>
            <tr>
                <th>贷款已结清订单数</th>
                <th>信⽤贷款时⻓</th>
                <th>最近⼀次贷款放款时间</th>
            </tr>
            <tr>
                <td id="B22170052"></td>
                <td id="B22170053"></td>
                <td id="B22170054"></td>
            </tr>
        </table>
    </div>

    <div class="table">
        <table>
            <tr>
                <td></td>
                <th>近12个月</th>
                <th>近24个月</th>
            </tr>
            <tr>
                <th>贷款⾦额在1k及以下的笔数</th>
                <td id="B22170012"></td>
                <td id="--"></td>
            </tr>
            <tr>
                <th>贷款⾦额在1k-3k的笔数</th>
                <td id="B22170013"></td>
                <td id="---"></td>
            </tr>
            <tr>
                <th>贷款⾦额在3k-10k的笔数</th>
                <td id="B22170014"></td>
                <td id="-----"></td>
            </tr>
            <tr>
                <th>贷款⾦额在1w以上的笔数</th>
                <td id="B22170015"></td>
                <td id="------"></td>
            </tr>
            <tr>
                <th>消⾦类贷款机构数</th>
                <td id="B22170021"></td>
                <td id="B22170022"></td>
            </tr>
            <tr>
                <th>⽹贷类贷款机构数</th>
                <td id="B22170023"></td>
                <td id="B22170024"></td>
            </tr>

        </table>
    </div>


    <div class="table">
        <table>
            <tr>
                <td></td>
                <th>近6个月</th>
                <th>近12个月</th>
                <th>近24个月</th>
            </tr>
            <tr>
                <th>M0+逾期贷款笔数</th>
                <td id="B22170025"></td>
                <td id="B22170026"></td>
                <td id="B22170027"></td>
            </tr>
            <tr>
                <th>M1+逾期贷款笔数</th>
                <td id="B22170028"></td>
                <td id="B22170029"></td>
                <td id="B22170030"></td>
            </tr>
            <tr>
                <th>累计逾期⾦额</th>
                <td id="B22170031"></td>
                <td id="B22170032"></td>
                <td id="B22170033"></td>
            </tr>

        </table>
    </div>


    <div class="table">
        <table>
            <tr>
                <td></td>
                <th>近1个月</th>
                <th>近3个月</th>
                <th>近6个月</th>
                <th>近12个月</th>
                <th>近24个月</th>
            </tr>
            <tr>
                <th>贷款笔数</th>
                <td id="B22170002"></td>
                <td id="B22170003"></td>
                <td id="B22170004"></td>
                <td id="B22170005"></td>
                <td id="B22170006"></td>
            </tr>
            <tr>
                <th>贷款总⾦额</th>
                <td id="B22170007"></td>
                <td id="B22170008"></td>
                <td id="B22170009"></td>
                <td id="B22170010"></td>
                <td id="B22170011"></td>
            </tr>
            <tr>
                <th>贷款机构数</th>
                <td id="B22170016"></td>
                <td id="B22170017"></td>
                <td id="B22170018"></td>
                <td id="B22170019"></td>
                <td id="B22170020"></td>
            </tr>
            <tr>
                <th>失败扣款笔数</th>
                <td id="B22170035"></td>
                <td id="B22170036"></td>
                <td id="B22170037"></td>
                <td id="B22170038"></td>
                <td id="B22170039"></td>
            </tr>
            <tr>
                <th>履约贷款总⾦额</th>
                <td id="B22170040"></td>
                <td id="B22170041"></td>
                <td id="B22170042"></td>
                <td id="B22170043"></td>
                <td id="B22170044"></td>
            </tr>
            <tr>
                <th>履约贷款次数</th>
                <td id="B22170045"></td>
                <td id="B22170046"></td>
                <td id="B22170047"></td>
                <td id="B22170048"></td>
                <td id="B22170049"></td>
            </tr>
        </table>
    </div>


    <div class="title">信用详情</div>
    <div class="table">
        <table>
            <tr>
                <th>⽹贷授信额度</th>
                <th>⽹贷额度置信度</th>
                <th>⽹络贷款类机构数</th>
                <th>⽹络贷款类产品数</th>
            </tr>
            <tr>
                <td id="C22180001"></td>
                <td id="C22180002"></td>
                <td id="C22180003"></td>
                <td id="C22180004"></td>
            </tr>
            <tr>
                <th>⽹络贷款机构最⼤授信额度</th>
                <th>⽹络贷款机构平均授信额度</th>
                <th>消⾦贷款类机构数</th>
                <th>消⾦贷款类产品数</th>
            </tr>
            <tr>
                <td id="C22180005"></td>
                <td id="C22180006"></td>
                <td id="C22180007"></td>
                <td id="C22180008"></td>
            </tr>
            <tr>
                <th>消⾦贷款类机构最⼤授信额度</th>
                <th>消⾦贷款类机构平均授信额度</th>
                <th>消⾦建议授信额度</th>
                <th>消⾦额度置信度</th>
            </tr>
            <tr>
                <td id="C22180009"></td>
                <td id="C22180010"></td>
                <td id="C22180011"></td>
                <td id="C22180012"></td>
            </tr>
        </table>
    </div>

</div>
<script src="/jquery-3.5.1.min.js"></script>
<script src="/url.js"></script>
<script type="text/javascript">
    let url = requestUrl + "/erupt-api/userReport/get";
    let urlSearchParams = new URLSearchParams(window.location.search);
    let tokenJson = localStorage.getItem('_token');
    let jsonObj = JSON.parse(tokenJson);
    let isGetNew = 0
    getReport()

    function getReport() {
        $.ajax({
            type: "POST",
            url: url,
            headers: {
                token: jsonObj.token
            },
            data: {userId: urlSearchParams.get('userId'), getNew: isGetNew, type: 2},
            datatype: "json",
            success: function (result) {
                console.log(result)
                if (result.code === 1) {
                    dataInputHtml(result.data.infoJson);
                } else {
                    alert(result.msg)
                }
                isGetNew = 0
            }
        });
    }

    function getNewReport() {
        isGetNew = 1
        getReport()
    }

    //数据填入
    function dataInputHtml(res) {
        if (res === undefined) {
            return
        }
        let resData = JSON.parse(res)
        // var resData = res.resp_data
        console.log(resData)
        //所有遍历
        for (let key in resData) {
            inputById(resData[key], key)
        }


        //申请⾏为详情
        for (let key in resData.apply_report_detail) {
            inputById(resData.apply_report_detail[key], key)
        }

        //放款还款详情
        for (let key in resData.behavior_report_detail) {
            inputById(resData.behavior_report_detail[key], key)
        }

        //信⽤详情
        for (let key in resData.current_report_detail) {
            inputById(resData.current_report_detail[key], key)
        }
    }

    dataInputHtml()


    function inputById(data, idName) {
        if (document.getElementById(idName)) {
            document.getElementById(idName).innerHTML = data
        }
    }
</script>
</body>
<style type="text/css">
    i {
        font-style: normal;
    }

    .report-con {
        background: #fff;
        color: #000;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .big-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .desc {
        font-size: 12px;
    }

    .title {
        font-size: 20px;
        margin: 28px 0 20px;
    }

    .small-title {
        font-size: 16px;
        margin: 28px 0 20px;
        padding-left: 10px;
        position: relative;
    }

    .small-title::before {
        content: '';
        background: #1972F8;
        width: 2px;
        height: 16px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .user-info {
        margin: 30px 0 20px;
    }

    .user-info .top {
        display: flex;
        align-items: center;
    }

    .user-info .top .name {
        font-size: 16px;
        line-height: 34px;
    }

    .user-info .top .tip {
        border: 1px solid #0938F7;
        height: 28px;
        line-height: 26px;
        padding: 0 10px;
        border-radius: 17px;
        color: #0938F7;
        font-size: 12px;
        margin-left: 10px;
    }

    .user-info .row {
        display: flex;
        align-items: center;
    }

    .user-info .row .item {
        width: 300px;
        font-size: 12px;
        line-height: 30px;
        margin-top: 6px;
    }

    .user-info .row .item span {
        font-weight: bold;
    }

    .advice-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .advice-title span {
        color: red;
        font-weight: bold;
    }

    .advice-title.level1 span {
        color: #42E61A;
    }

    .advice-title.level2 span {
        color: #22DDDD;
    }

    .advice-title.level3 span {
        color: #338FCC;
    }

    .advice-title.level4 span {
        color: #E6941A;
    }

    .advice-title.level5 span {
        color: #E61A42;
    }

    .advice-list {
        display: flex;
        margin-bottom: 30px;
    }

    .advice-list .item {
        flex: 1;
        color: #fff;
        line-height: 26px;
        text-align: center;
        font-size: 12px;
        position: relative;
    }

    .advice-list .item span {
        position: absolute;
        left: 0;
        color: #000;
        top: 100%;
    }

    .advice-list .item i {
        position: absolute;
        right: 0;
        color: #000;
        top: 100%;
    }

    .advice-list .item.level1 {
        background: #42E61A;
    }

    .advice-list .item.level2 {
        background: #22DDDD;
    }

    .advice-list .item.level3 {
        background: #338FCC;
    }

    .advice-list .item.level4 {
        background: #E6941A;
    }

    .advice-list .item.level5 {
        background: #E61A42;
    }

    .table {
        margin-bottom: 20px;
    }

    .table table {
        width: 100%;
        table-layout: fixed;
        font-size: 12px;
        line-height: 36px;
        border-left: 1px solid #D9DAE2;
        border-top: 1px solid #D9DAE2;
        border-collapse: collapse;
    }

    .table table tr th {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        background: #ECEDF0;
    }

    .table table tr td {
        border-right: 1px solid #D9DAE2;
        border-bottom: 1px solid #D9DAE2;
        text-align: center;
        padding: 0;
    }
</style>
</html>
